<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div
    class="admin-com-cell-01 w-pointer w-hover-glow"
    :class="{ 'right-operation': operation }"
    @click="cellClick"
  >
    <span class="left-img w-image-fill" v-lazy:background-image="icon || defaultImage"/>
    <div class="text-box w-flex-between">
      <p
        class="title text w-text-line-1"
        :class="{ 'w-hover-text': link, 'w-pointer': link }"
        @click.stop="linkClick"
      >{{ title }}</p>
      <p class="date text">{{ time }}</p>
      <p class="describe text w-text-line-2">{{ describe }}</p>
    </div>
    <div v-if="operation" class="operation w-flex-center">
      <el-button type="primary" size="mini" class="el-icon-edit" @click.stop="editBtnClick"/>
      <el-button type="danger" size="mini" class="el-icon-delete" @click.stop="detilBtnClick"/>
    </div>
  </div>
</template>

<script lang="ts">
import Config from "@/config/index";
import { Component, Vue, Prop } from "vue-property-decorator";
import { Getter } from "vuex-class";
import WPopView from '@/utils/popView'

@Component({})
export default class AdminComCell01 extends Vue {
  // 左侧图片
  @Prop({ default: "" }) icon!: string;
  // 标题
  @Prop({ default: "" }) title!: string;
  // 点击标题调换的url
  @Prop({ default: "" }) link!: string;
  // 时间
  @Prop({ default: "" }) time!: string;
  // 描述
  @Prop({ default: "" }) describe!: string;
  // 是否显示右侧操作
  @Prop({ default: false }) operation!: boolean;

  @Getter("defaultImage") defaultImage!: string;

  // 链接点击
  linkClick() {
    if (this.link) {
      window.open(this.link);
    } else {
      this.cellClick();
    }
  }

  // cell 点击
  cellClick() {
    this.$emit("cellClick");
  }

  // 编辑按钮点击
  editBtnClick() {
    this.$emit("editClick");
  }

  // 删除按钮点击
  detilBtnClick() {
    WPopView
      .confirm("删除提示", `此操作将永久删除该作品( ${this.title} ), 是否继续?`)
      .then(() => {
        this.$emit("removeClick");
      })
      .catch(() => {});
  }
}
</script>

<style lang="scss" scoped>
.admin-com-cell-01 {
  display: block;
  margin-bottom: 10px;
  padding: 10px 10px 10px 120px;
  border-radius: 4px;
  background-color: #efefef;
  height: 120px;
  position: relative;
  > .left-img {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
  }
  > .text-box {
    flex-direction: column;
    height: 100%;
    .text {
      margin: 0;
    }
    .title {
      font-size: 18px;
      color: #333;
    }
    .date {
      color: #999;
      font-size: 14px;
    }
    .describe {
      height: 46px;
      font-size: 16px;
      color: #666;
      line-height: 24px;
    }
  }
  > .operation {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
  }
}
.admin-com-cell-01.right-operation {
  padding: 10px 120px 10px 120px;
}
</style>
